import { Component, OnInit, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import * as gc from 'src/app/global/globalconst';
import { SendoutDtl } from '../sendoutdetail/sendoutdetail.component';
import { NzTableComponent } from 'ng-zorro-antd';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';

export class goods{
  no:string;name:string;spe:string;
}

export class good{
  g:string[] = [];
}

export class coordinate{
  x:number;y:number;

  constructor(){
    this.x = -1;
    this.y = -1;
  }
}

@Component({
  selector: 'app-testsdodtl',
  templateUrl: './testsdodtl.component.html',
  styleUrls: ['./testsdodtl.component.css']
})
export class TestsdodtlComponent implements OnInit,AfterViewInit {


  tableData:goods[] = [];

  tableData01:good[] = [];

  selected:boolean = false;

  clicked:boolean = false;

  curCell:coordinate;

  BACKGROUND_COLOR:string = "red";

  COLOR:string = '#007acc';

  @ViewChild('nzTable',{static:false})
  private table:NzTableComponent

  constructor(){
    console.log('constructor');
    
    this.getData();
  }

  ngAfterViewInit(): void {
    console.log('ngAfterViewInit');

    // let aa:any = this.table.tableBodyElement.nativeElement.children[0].children[2].childNodes[3].cells;
    // console.log(this.table.tableBodyElement.nativeElement.children[0].children[2].childNodes[3].cells);

    console.log(this.table);
    console.log(this.table.tableBodyElement.nativeElement.childNodes[0].childNodes[8].childNodes[3].childNodes[1]);
    console.log(this.table.tableBodyElement.nativeElement.childNodes[0].childNodes[8].childNodes[3].childNodes[1].innerText);

    // 下面的3是行号（下标从0开始，列头计算在内），1是当前行的单元格构成的数组的下标表示列序号
    // 下标从0开始
    this.table.tableBodyElement.nativeElement.childNodes[0].childNodes[8].childNodes[3].childNodes[1].style.background = "red";
    // console.log(this.table.tableBodyElement.nativeElement.childNodes[0].childNodes[8].childNodes[3].childNodes.length);
    // console.log(this.table.tableBodyElement.nativeElement.childNodes[0].childNodes[8].childNodes.length);
    // console.log(this.table.tableBodyElement.nativeElement.childNodes[0].childNodes[7].childNodes[2].childNodes[1].innerText);
    
    
    // console.log(this.table.nativeElement.children[0]);
    // console.log(this.table.nativeElement.children[0].children[2].childNodes[3].cells);
    
  }


  ngOnInit(): void {
    
    // this.getData01();
  }

  getData(){
    this.tableData.push({'no':'DDH001','name':'单面珊瑚绒','spe':'180*369'});
    this.tableData.push({'no':'DDH001','name':'单面法兰绒','spe':'205*369'});
    this.tableData.push({'no':'DDH002','name':'宝宝绒','spe':'205*369'});
    this.tableData.push({'no':'DDH003','name':'双面法兰绒','spe':'258*111'});
  }

  getData01(){
    this.tableData01.push({'g':['a1','b1','c1']});
    this.tableData01.push({'g':['a2','b2','c2']});
    this.tableData01.push({'g':['a3','b3','c3']});
    this.tableData01.push({'g':['a4','b4','c4']});

  }


  clickCell(e,rowIndex,colIndex){
    // this.selected = !this.selected;
    console.log(e);

    e.srcElement.bgColor = "red";

    console.log(e.srcElement);
    e.srcElement.style.background="red";
    
    let tip = "row = " + rowIndex + ",col = " + colIndex;
    console.log(tip);
  }

  changeColor(){
    
  }

  updateCell(x,y){
    if(this.curCell === null){
      this.curCell = new coordinate();
    }

    if(this.curCell.x === x && this.curCell.y === y){
      // this.curCell.color = !this.curCell.color;


    }
    
    if(this.curCell.x === -1){
      this.curCell.x = x;
      this.curCell.y = y;
      // this.curCell.color = true;
    }

  }


  // 打印表格DOM树
  printTable(){
  }

  // 移动当前变色，上下左右依次是：0，1，2，3
  moveTo(direction:number){
    switch(direction){
      
    }
  }

}
